<template>
  <div style="width: 100%">
    <el-form
      ref="formRef"
      class="model-form"
      :rules="rules"
      label-width="120px"
      :model="propertyRef"
    >
      <el-form-item
        style="margin-bottom: 18px"
        label="名称"
        prop="name"
        size="small"
      >
        <el-input
          v-model="propertyRef.name"
          auto-complete="off"
          maxlength="30"
        />
      </el-form-item>
      <el-form-item
        style="margin-bottom: 18px"
        label="标识符"
        prop="identifier"
        size="small"
      >
        <el-input
          :disabled="isUpdate"
          v-model="propertyRef.identifier"
          auto-complete="off"
          maxlength="30"
        />
      </el-form-item>
      <el-form-item style="margin-bottom: 18px" label="描述" size="small">
        <el-input
          v-model="propertyRef.description"
          auto-complete="off"
          maxlength="40"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item style="margin-bottom: 18px;" label="组织机构" size="small">
                <el-input v-model="propertyRef.unit" auto-complete="off" maxlength="40"></el-input>
            </el-form-item> -->
      <!-- <el-form-item style="margin-bottom: 18px;" label="图标">
        <icon-select v-model="propertyRef.iconId" :data="propertyRef.icon" width="210px" :dataMode="DataModeEnum.REMOTE"/>
      </el-form-item> -->
      <el-form-item
        style="margin-bottom: 18px"
        label="数据类型"
        prop="dataType.type"
        size="small"
      >
        <el-select
          v-model="propertyRef.dataType.type"
          placeholder="请选择数据类型"
        >
          <el-option label="int32" value="int32" />
          <el-option label="float" value="float" />
          <el-option label="bool" value="bool" />
          <el-option label="enum" value="enum" />
          <el-option label="text" value="text" />
          <el-option label="date" value="date" />
          <!-- <el-option v-if="isService" label="json" value="json" /> -->
          <el-option v-if="isProperty" label="position" value="position" />
        </el-select>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 18px"
        v-if="isSelectType('position')"
        size="small"
      >
        <el-row :gutter="40" style="width: 100%">
          <el-col :span="3">定位方式</el-col>
          <el-col :span="6">
            <el-select
              v-model="propertyRef.dataType.specs.locateType"
              placeholder="请选择定位方式"
            >
              <el-option label="经纬度定位" value="lonLat" />
              <el-option label="基站信息定位" value="basestation" />
              <el-option label="IP信息定位" value="ipinfo" />
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 18px"
        v-if="isSelectType('int32')"
        size="small"
      >
        <el-col :span="3"> 取值范围 </el-col>
        <el-col :span="5">
          <el-input
            v-model="propertyRef.dataType.specs.min"
            placeholder="最小值"
            maxlength="6"
            oninput="if(isNaN(value)) { value = null }"
          />
        </el-col>
        <el-col class="line" :span="1" style="text-align: center">-</el-col>
        <el-col :span="5">
          <el-input
            v-model="propertyRef.dataType.specs.max"
            placeholder="最大值"
            maxlength="6"
            oninput="if(isNaN(value)) { value = null }"
          />
        </el-col>
        <el-col :span="10"></el-col>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 18px"
        v-if="isSelectType('float')"
        size="small"
      >
        <el-col :span="3"> 取值范围 </el-col>
        <el-col :span="3">
          <el-input
            v-model="propertyRef.dataType.specs.min"
            placeholder="最小值"
            maxlength="6"
            oninput="value=value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g,'$1')"
          />
        </el-col>
        <el-col class="line" :span="1" style="text-align: center">-</el-col>
        <el-col :span="3">
          <el-input
            v-model="propertyRef.dataType.specs.max"
            placeholder="最大值"
            maxlength="6"
            oninput="value=value.replace(/[^0-9.]/g,'').replace(/(\..*)\./g,'$1')"
          />
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="11">
          <el-input
            v-model="propertyRef.dataType.specs.precision"
            placeholder="精度"
            maxlength="6"
            style="margin-top: 1px"
          >
            <template v-slot:append>(保留小数位,实际数据以int存储)</template>
          </el-input>
        </el-col>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 10px"
        v-if="isSelectType('bool')"
        size="small"
      >
        <el-col :span="3">布尔值</el-col>
        <el-col :span="1"> 0 - </el-col>
        <el-col :span="3">
          <el-input
            v-model="boolItemRef._true"
            placeholder="如:否"
            maxlength="10"
          />
        </el-col>
        <el-col :span="1">&nbsp; </el-col>
        <el-col :span="1"> 1 - </el-col>
        <el-col :span="3">
          <el-input
            v-model="boolItemRef._false"
            placeholder="如:是"
            maxlength="10"
          />
        </el-col>
      </el-form-item>
      <el-form-item
        label=" "
        style="margin-bottom: 10px"
        v-if="isSelectType('enum')"
        size="small"
      >
        <el-col v-for="ei in enumItemsRef" :span="24" :key="ei.value">
          <el-row>
            <el-col :span="3"> 枚举值 </el-col>
            <el-col :span="3">
              <el-input v-model="ei.value" placeholder="如:0" maxlength="6" />
            </el-col>
            <el-col :span="2"> &nbsp; </el-col>
            <el-col :span="3"> 枚举描述 </el-col>
            <el-col :span="5">
              <el-input v-model="ei.name" maxlength="15" />
            </el-col>
            <el-col :span="1"> &nbsp; </el-col>
            <el-col :span="2">
              <el-button type="danger" size="small" @click="delEnum(ei)"
                >删除</el-button
              >
            </el-col>
          </el-row>
        </el-col>
        <el-button type="primary" size="small" @click="addEnumItem()"
          >添加</el-button
        >
      </el-form-item>
      <el-form-item
        style="margin-bottom: 10px"
        v-if="isSelectType('text')"
        size="small"
      >
        <el-col :span="3">数据长度</el-col>
        <el-col :span="4">
          <el-input
            v-model="propertyRef.dataType.specs.length"
            placeholder="数据长度"
            maxlength="10"
          />
        </el-col>
      </el-form-item>
      <el-form-item
        style="margin-bottom: 10px"
        v-if="isSelectType('date')"
        size="small"
      >
        String类型的UTC时间戳（毫秒）
      </el-form-item>
      <el-form-item
        style="margin-bottom: 10px"
        v-if="isProperty && !isSelectType('position')"
        label="读写"
        prop="accessMode"
        size="small"
      >
        <el-radio-group v-model="propertyRef.accessMode">
          <el-radio label="rw">读写</el-radio>
          <el-radio label="r">只读</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item
        style="margin-bottom: 18px"
        v-if="isSelectType('json')"
        size="small"
      >
        <el-input
          v-model="jsonSpecs"
          placeholder="请输入"
          @input="onInput"
          type="textarea"
          :rows="2"
        />
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
// import { DataModeEnum } from '@/enums/DataModeEnum'
import { validateidentifier } from "@utils/validate";

export default {
  props: {
    property: {
      type: Object,
      default: () => ({}),
    },
    jsonString: {
      type: String,
      default: () => "",
    },
    enumItems: {
      type: Array,
      default: () => [],
    },
    boolItem: {
      type: Object,
      default: () => ({}),
    },
    isService: {
      type: Boolean,
      default: false,
    },
    isProperty: {
      type: Boolean,
      default: false,
    },
    isUpdate: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      propertyRef: this.property,
      boolItemRef: this.boolItem,
      enumItemsRef: this.enumItems,
      rules: {
        description: [
          { required: false, message: "请输入描述", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        identifier: [
          { required: true, message: "请输入标识符", trigger: "blur" },
          { validator: validateidentifier },
        ],
        accessMode: [{ required: true, message: "请选择", trigger: "change" }],
        "dataType.type": [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
      },
      jsonSpecs: "",
    };
  },
  watch: {
    propertyRef: {
      handler(newVal, oldVal) {
        this.$emit("updateModelForm", this.propertyRef);
      },
      deep: true, // 启用深度监听
    },
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            resolve(valid);
          } else {
            reject(valid);
          }
        });
      });
    },
    isSelectType(type) {
      return type === this.propertyRef.dataType.type;
    },
    addEnumItem() {
      if (Array.isArray(this.enumItemsRef)) {
        this.enumItemsRef.push({});
      }
    },
    delEnum(ei) {
      const idx = this.enumItemsRef.findIndex((e) => e.value === ei.value);
      this.enumItemsRef.splice(idx, 1);
    },

    onInput(e) {
      // console.log(e, "e");
      this.propertyRef.dataType.specs = e;
      console.log(this.propertyRef, "this.propertyRef");
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep(.el-form-item) {
  .el-form-item {
    margin-bottom: 10px;
  }
}
</style>
